<template>
       <div class="ReportDataConfigure">
           <div class="configureChildrenSH" :class="{'alert1':index==0 && children.length!=1 ,'martop':children.length==1,'alert':Number(children.length -1)!=index && index!=0}"   v-for="(obj,index) in children">
              <div style="overflow:hidden;float: left">
                  <span class="configurePosition" @click="modification(obj)"><span>{{obj.join.type | describe}}</span></span>
                  <div class="configureALI" @mouseenter="mouseenter(obj.key)" @mouseleave="mouseleave('null')"><div @click="modification(obj)">{{obj.title}}</div><div class="deleteTbp" @click="deleteClick(obj.key)" v-if="deleteKey ==obj.key"><i class="iconfont iconempty"></i></div></div><i class="line" v-if="obj.children"></i>
                  <ChartDataConfigure v-if="obj.children" v-on:modification="modification" :children="obj.children"></ChartDataConfigure>
              </div>
           </div>
       </div>
</template>
<script>

export default {
    name: 'ChartDataConfigure',
    components: {
    },
    props: {
        children: {
            type: Array,
            default: ""
        },
    },
    data() {
        return {
            //移上去删除的key
            deleteKey:null
        }
    },
    filters:{
        describe(name){
            if(name =='left'){
                return '左连接'
            }else if(name =='inner') {
                return '内连接'
            }else if(name =='full') {
                return '全连接'
            }
        }
    },
    created() {

    },
    methods: {
        mouseenter(key){
            this.deleteKey = key
        },
        mouseleave(name){
            this.deleteKey = name
        },
        //点击删除
        deleteClick(key){
            this.$emit('deleteClick',key)
        },
        //xiugai
        modification(type){
            this.$emit('modification',type)
        }
    },
    watch:{

    }
}
</script>
<style>
.deleteTbp{
    position: relative;
    top: -26px;
    left: 113px;
    color: white;
    text-align: center;
    width: 26px;
    height: 26px;
    background-color: #ff6868;
    border-radius: 0px 2px 2px 0px;
}
.martop{
    margin-top: 0px!important;
}
.ReportDataConfigure{
    overflow: hidden;
}
.configurePosition{
    width: 116px;
    float: left;
    text-align: center;
    margin-top:14px;
    border-top: 1px solid #dadde0;
    cursor:pointer
}
.configurePosition >span{
    display: block;
    width: 50px;
    margin-left: 40px;
    background: white;
    margin-top: -10px;
    color: #67bb15;
}
.alert{
    border-left: 1px solid #dadde0;
}
.alert1{
    margin-top:15px!important;
    border-left: 1px solid #dadde0;
}
.alertmartop{
    margin-top: -15px!important;
}
.configureChildrenSH{
    overflow: hidden;
    padding-bottom: 40px;
    margin-top: -15px;
}
.line{
    width: 24px;
    height: 1px;
    display: block;
    background-color: #dadde0;
    float: left;
    margin-top: 14px;
}
.neiConfigure{
    padding: 15px;
    overflow: auto;
}
.configure{
    display: block;
    width: 150px;
    height: 26px;
    background-color: #e5eaff;
    border-radius: 2px;
    color: #7b91e9;
    line-height: 26px;
    padding: 0px 8px;
    border-left: 3px solid #9babed;
    float: left;
}
.configureALI{
    display: block;
    width: 150px;
    height: 26px;
    background-color: #e5eaff;
    border-radius: 2px;
    color: #7b91e9;
    line-height: 26px;
    padding: 0px 8px;
    float: left;
    cursor: pointer;
    border-left: 3px solid #9babed;
}
.deleteAtto{
    color: #c0c5cc;
    font-size: 20px;
    margin-left: 15px;
    cursor: pointer;
}
</style>
